<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #decorate-index {
        font-family: Source Han Sans SC;
        background: #fff;
        border-radius: 10px 10px 0px 0px;
    }

    .template-container {
        padding: 2px 20px 4px;
    }

    .template-item-container {
        background: #FFFFFF;
        border: 1px solid #D9D9D9;
        border-radius: 6px;
        margin-bottom: 16px;
    }

    .template-item-container:hover {
        box-shadow: 0px 2px 10px rgba(29, 3, 72, 0.14);
    }

    .template-item-banner {
        height: 106px;
    }

    .template-item-config {
        padding: 16px 12px;
    }

    .template-item-config>div {
        line-height: 1;
    }

    .template-item-row {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .template-item-config .template-item-row-platform {
        margin-bottom: 8px;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
    }

    .template-item-row-createtime {
        /* margin-bottom: 18px; */
        flex-wrap: wrap;
    }

    .template-item-row:last-child {
        margin-bottom: 0;
    }

    .template-item-name {
        font-weight: 600;
        font-size: 16px;
        color: #262626;
        flex-shrink: 5;
        margin-right: 6px;
    }

    .template-item-row-title {
        font-size: 12px;
        color: #595959;
        flex-shrink: 0;
    }
    .template-item-row-createtime .template-item-row-title,.template-item-row-createtime .template-createtime{
        margin-bottom: 6px;
    }

    .platform-title {
        font-size: 14px;
    }

    .template-item-platform {
        margin-right: 8px;
    }

    .template-release-status,
    .template-copy {
        color: #777;
    }

    .template-copy {
        margin-right: 12px;
    }

    .template-delete {
        color: #ED5B56;
        margin-right: 12px;
    }

    .template-decorate {
        color: #806AF6;
    }

    .template-release {
        color: #4390F7;
    }

    .template-copy,
    .template-delete,
    .template-decorate,
    .template-release,.template-release-status {
        cursor: pointer;
    }

    .el-dialog {
        width: 480px;
    }
    .template-item-edit-image{
        width: 15px;
        height: 14px;
        flex-shrink: 0;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="decorate-index" v-cloak>
    <div class="common-header-container">
        <div>模板管理</div>
    </div>
    <div class="common-button-container display-flex-b">
        <div class="display-flex">
            <div class="common-refresh-button" @click="getTemplate('refresh')">
                <i class="fa fa-refresh" :class="focusi?'focusi':''"></i>
            </div>
            <div class="common-button common-add-button" @click="operation('create',null)">
                <i class="el-icon-plus"></i>
                新建模板
            </div>
        </div>
        <div class="common-button common-recycle-button" @click="goRecycle">
            <i class="fa fa-recycle"></i>
            回收站
        </div>
    </div>
    <div class="template-container">
        <el-row :gutter="24">
            <el-col :xs="24" :sm="8" :md="6" :lg="4" :xl="4" v-for="(item,index) in templateList">
                <div class="template-item-container">
                    <div class="template-item-banner">
                        <el-image :src="Fast.api.cdnurl(item.cover)" fit="cover">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <div class="template-item-config">
                        <div class="template-item-row display-flex">
                            <div class="template-item-name ellipsis-item">
                                {{item.name}}
                            </div>
                            <div class="template-item-edit-image" @click="operation('edit',item.id)">
                                <el-image src="/assets/addons/groupon/img/decorate/template_name.png" fit="cover">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </div>
                        </div>
                        <div class="template-item-row template-item-row-platform display-flex">
                            <span class="template-item-row-title platform-title">支持平台：</span>
                            <div class="display-flex" v-if="item.platform!='preview' && item.platform!=''">
                                <div class="template-item-platform" v-for="i in item.platform.split(',')">
                                    <el-image :src="'/assets/addons/groupon/img/decorate/'+i+'.png'" fit="cover">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </div>
                            </div>
                            <div v-else>无</div>
                        </div>
                        <div class="template-item-row display-flex">
                            <span class="template-item-row-title">备注：</span><span>{{item.memo}}</span>
                        </div>
                        <div class="template-item-row template-item-row-createtime display-flex">
                            <span class="template-item-row-title">更新时间：</span>
                            <span class="template-createtime">{{moment(item.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}</span>
                        </div>
                        <div class="template-item-row display-flex-b">
                            <div class="template-release-status" @click="operation('down',item.id)"
                                v-if="item.status=='normal'">下架
                            </div>
                            <div class="template-release" @click="operation('release',item.id)"
                                v-if="item.status!='normal'">发布</div>
                            <div class="operation-button-container display-flex">
                                <div class="template-copy" @click="operation('copy',item.id)">复制</div>
                                <div v-if="item.status!='normal'" class="template-delete"
                                    @click="operation('delete',item.id)">删除</div>
                                <div class="template-decorate" @click="operation('decorate',item.id)">装修</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 模板创建 -->
    <div class="dialog-isbutton-container">
        <el-dialog :title="submitId?'编辑模板':'新建模板'" :visible.sync="templateDialog" :before-close="templateDialogClose">
            <div class="dialog-container">
                <el-form :model="templateForm" :rules="templateRules" ref="ruleForm" label-width="100px">
                    <el-form-item label="模板名称" prop="name">
                        <el-input type="text" placeholder="请输入模板名称" v-model="templateForm.name" size="medium">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="模板备注" prop="memo">
                        <el-input type="text" placeholder="请输入模板备注" v-model="templateForm.memo" size="medium">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="发布平台">
                        <el-checkbox-group v-model="templateForm.platform">
                            <el-checkbox label="微信小程序"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </div>
            <div class="dialog-button-container">
                <div class="dialog-button dialog-button-cancel" @click="templateDialogClose">取消</div>
                <div class="dialog-button dialog-button-define" @click="templateDialogClose('yes')">确定</div>
            </div>
        </el-dialog>
    </div>
</div>